<template>
  <div
    class="vbestui-tool-tip"
    @mouseenter="tooltipMouseEnter"
    @mouseleave="tooltipMouseLeave"
    @mousedown="PoptipFocus"
    v-click-outside="handleClose"
  >
    <div class="vbestui-tootip-group"  @click="clickToggleShow">
      <slot></slot>
    </div>
    <transition name="tooltip-fade">
      <div
        v-show="always?true:isShow"
        class="vbestui-bubble"
        :class="[`vbestui-bubble-theme-${theme}`,
            `vbestui-bubble-placement-${placement}`]"
        :style="{width:!confirm?maxLength:'210px'}"
      >
        <div class="vbestui-triangle" :class="[`vbestui-triangle-${placement}`]">
          <div
            class="vbestui-triangle-item"
            v-if="theme=='light'"
            :class="[`vbestui-triangle-item-${placement}`]"
          ></div>
        </div>
        <div class="vbestui-bubble-noconfirm" v-if="!confirm">
          <div class="vbestui-bubble-title" v-if="$slots.title">
            <slot name="title"></slot>
          </div>
          <div class="vbestui-bubble-content" v-if="$slots.content">
            <slot name="content"></slot>
          </div>
        </div>
        <div class="vbestui-bubble-confirm" v-else>
          <div class="vbestui-confirm-content" v-if="$slots.content">
            <slot name="content"></slot>
          </div>
          <div class="vbestui-confirm-button">
            <b-button
              type="text"
              :transparent="theme=='light'?false:true"
              width="35px"
              height="25px"
              @click="confirmNo"
            >取消</b-button>
            <b-button type="primary" width="35px" height="25px" @click="confirmYes">确定</b-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { oneOf } from "utils/index.js";
export default {
  name: "BPoptip",
  props: {
    theme: {
      validator(value) {
        return oneOf(value, ["dark", "light"]);
      },
      default: "dark",
    },
    placement: {
      validator(value) {
        return oneOf(value, [
          "top",
          "top-start",
          "top-end",
          "bottom",
          "bottom-start",
          "bottom-end",
          "left",
          "left-start",
          "left-end",
          "right",
          "right-start",
          "right-end",
        ]);
      },
      default: "bottom",
    },
    trigger: {
      validator(value) {
        return oneOf(value, ["hover", "click", "focus"]);
      },
      default: "click",
    },
    confirm: {
      type: Boolean,
      default: false,
    },
    delay: {
      type: [Number, String],
      default: 0,
    },
    maxLength: {
      type: String,
      default: "",
    },
    always: {
      //是否总是可见的
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isShow: false,
      timer: null,
      delayTimer: null,
    };
  },
  computed: {},
  methods: {
    tooltipMouseEnter() {
      if (this.always) return;
      if (this.trigger != "hover") return;
      this.show();
    },
    tooltipMouseLeave() {
      if (this.always || this.trigger != "hover") return;
      this.hidden();
    },
    /**切花poptip显示隐藏 */
    clickToggleShow() {
      if (this.always || this.trigger != "click") return;
      this.isShow = !this.isShow;
      if (this.isShow) this.show();
      else this.hidden();
    },
    /**trigger形式时显示poptip */
    PoptipFocus(e) {
      if (this.always || this.trigger != "focus") return;
      /**对点击的标签进行判断 */
      if (e.target.tagName == "INPUT") this.show();
    },
    /**点击外部元素关闭poptip，在trigger为click形式时不关闭，其他形式点击外部关闭 */
    handleClose() {
      if (this.trigger == "click") return;
      this.hidden();
    },
    /**对话框模式，取消按钮 */
    confirmNo() {
      // if (this.trigger != "click") this.hidden();
      this.hidden();
      this.$emit("cancel");
    },
    /**对话框模式，确定按钮 */
    confirmYes() {
      // if (this.trigger != "click") this.hidden();
      this.hidden();
      this.$emit('ok');
    },
    show() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (this.delayTimer) clearTimeout(this.delayTimer);
      this.timer = setTimeout(() => {
        this.isShow = true;
        this.$emit("show");
      }, this.delay * 1000);
    },
    hidden() {
      if (this.timer) clearTimeout(this.timer);
      if (this.trigger == "hover") {
        this.delayTimer = setTimeout(() => {
          this.isShow = false;
          this.$emit("hidden");
        }, 150);
      } else {
        this.isShow = false;
        this.$emit("hidden");
      }
    },
  },
};
</script>